<template>
  <a-spin :spinning="loading" wrapperClassName="indicator-details-container">
    <div class="indicator-details-container-inner">
      <!-- 头部返回 标题 -->
      <div class="indicator-details-header">
        <PageTitle :goBack="true" title="指标详情" />
      </div>
      <!-- 内容部分 -->
      <div class="indicator-details-content">

        <!-- 空指标详情情况 -->
        <div class="empty-indicator-details" v-if="!modelIndicatorList.length && !originModelIndicatorList.length">
          <div class="empty-indicator-details-inner">
            <img src="/@/assets/images/indicatorDetails/emty-icon.png" alt="">
            <span class="emty-tip-text">点击此按钮添加指标栏</span>
            <div class="add-indicator-btn" @click="addLocalIndicatorItem">新增指标栏</div>
          </div>
        </div>

        <!-- 非空指标详情 -->
        <div class="has-indicator-details" v-else>
          <!-- 新增指标栏 -->
          <div class="add-new-indicator-container">
            <div class="add-new-indicator-btn" @click="addLocalIndicatorItem">新增指标栏</div>
          </div>
          <!-- 指标栏列表 -->
          <div class="indicator-list-container">
            <div class="indicator-list-item" v-for="(item, itemIndex) of modelIndicatorList" :key="itemIndex">
              <!-- 标题 -->
              <div class="indicator-list-item-header">
                <div class="left-title">
                  <span class="indicator-name">{{ item.name }}</span>
                  <span class="indicator-score" v-if="item.metrics?.length">
                    （{{ countScore(item.metrics as Array<GetIndicatorDetailsDimensionItemMetrics>) }}分）
                  </span>
                </div>
                <div class="right-btn-container">
                  <div class="edit-indicator-btn" @click="editIndicator(item, itemIndex)">编辑</div>
                  <div class="remove-indicator-btn" @click="removeIndicator(itemIndex, item.name)">删除</div>
                </div>
              </div>
              <!-- 指标描述 -->
              <div class="indicator-description">
                <div class="indicator-description-text">
                  <span class="indicator-description-label">指标使用说明</span>
                  <div class="indicator-description-content">{{ `${item.description ? item.description : "-"}` }}</div>
                </div>
                <!-- <div class="indicator-create-text">
                  <span class="indicator-description-label">指标创建时间</span>
                  <span>{{ `${item.createDate ? dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") : "-"}` }}</span>
                </div> -->
              </div>
              <!-- 指标细项 -->
              <div class="indicator-minor-term">
                <!-- 细项列表 -->
                <a-form :model="item" ref="indicatorMinorTermForm" :hideRequiredMark="true" class="indicator-minor-term-form"
                  v-if="item.metrics?.length" :data-mapId="item.id">
                  <a-table :dataSource="item.metrics" :columns="columnsOptions" bordered :pagination="false">
                    <!-- 序号 -->
                    <template #key="{ index: _index }">{{ _index + 1 }}</template>
                    <!-- 指标名称 -->
                    <template #metricName="{ text, record, index: _index, column }">
                      <span v-if="!record.edit">{{ record.metricName ? record.metricName : "-" }}</span>
                      <a-form-item :name="['metrics', _index, 'metricName']" :rules="indicatorMinorTermFormRules.metricName" v-else>
                        <a-input v-model:value="record.metricName" placeholder="请输入指标名称" autocomplete="off" />
                      </a-form-item>
                    </template>
                    <!-- 规则名称 -->
                    <template #ruleName="{ text, record, index: _index, column }">
                      <span v-if="!record.edit">{{ record.ruleName ? record.ruleName : "-" }}</span>
                      <a-form-item :name="['metrics', _index, 'paths']" :rules="indicatorMinorTermFormRules.paths" v-else>
                        <a-cascader :options="indicatorDetailsMinorOptions" v-model:value="record.paths" placeholder="请选择指标规则" :fieldNames="fieldNames"
                          @change="(v, selectedOptions) => cascaderSelectChange(v, selectedOptions, record)" />
                      </a-form-item>
                    </template>
                    <!-- 得分 -->
                    <template #score="{ text, record, index: _index, column }">
                      <span v-if="!record.edit">{{ record.score ? record.score : "-" }}</span>
                      <a-form-item :name="['metrics', _index, 'score']" :rules="indicatorMinorTermFormRules.score" v-else>
                        <a-input v-model:value="record.score" placeholder="请输入得分" autocomplete="off" />
                      </a-form-item>
                    </template>
                    <!-- 操作栏 -->
                    <template #operation="{ text, record, index: _index, column }">
                      <div class="action-field">
                        <span class="action-field-edit" v-if="!record.edit" @click="record.edit = true">编辑</span>
                        <a-form-item :name="['metrics', _index, 'edit']" :rules="indicatorMinorTermFormRules.edit" v-else>
                          <span class="action-field-edit" @click="saveIndicatorMinorItem(record, _index, itemIndex)">保存</span>
                        </a-form-item>
                        <span class="action-field-remove" @click="removeIndicatorMinorItem(item.name, record.metricName, item, _index)">删除</span>
                      </div>
                    </template>
                  </a-table>
                </a-form>
                <!-- 添加指标细项 -->
                <div class="add-indicator-minor-term" @click="addIndicatorMinor(item)">添加指标细项</div>
              </div>
            </div>

            <!-- 保存模型配置 -->
            <div class="save-model-setting-options">
              <div class="model-count-score">
                <span>模型总分</span>
                <span class="score-text">{{ getCountScore(modelIndicatorList) }}</span>
                <span>分</span>
              </div>
              <span class="save-model-setting-btn" @click="saveModelAllOptions">保存模型设置</span>
              <span class="reset-model-setting-btn" @click="resetModelAllOptions">重置</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 新增指标分栏 -->
    <add-indicator-item v-model:open-status="addIndicatorItemDialog" @data-change="dataChange"></add-indicator-item>

    <!-- 修改指标分栏 -->
    <edit-indicator-item v-model:open-status="editIndicatorItemDialog" :edit-data="editIndicatorTempData" @data-change="editDataChange"
      @update:open-status="editDialogClose"></edit-indicator-item>

    <!-- 删除指标分栏 -->
    <remove-indicator-item-vue v-model:open-status="removeIndicatorItemDialog" @ok="removeOk" @update:openStatus="removeDialogClose"
      :subfield-name="removeCurrentName"></remove-indicator-item-vue>

    <!-- 删除指标分栏细项 -->
    <remove-indicator-minor v-model:open-status="removeIndicatorMinorDialog" @ok="removeMinorOk" @update:openStatus="removeMinorDialogClose"
      :subfield-name="removeIndicatorName" :indicator-minor-name="removeIndicatorMinorName"></remove-indicator-minor>

    <!-- 重置该模型下所有指标 -->
    <reset-indicator-item v-model:open-status="resetIndicatorItemDialog" @ok="resetOk"></reset-indicator-item>
  </a-spin>
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { message } from 'ant-design-vue';
import AddIndicatorItem from "./AddIndicatorItem.vue";
import EditIndicatorItem from "./EditIndicatorItem.vue";
import RemoveIndicatorItemVue from "./RemoveIndicatorItem.vue";
import RemoveIndicatorMinor from "./RemoveIndicatorMinor.vue";
import ResetIndicatorItem from "./ResetIndicatorItem.vue";
import PageTitle from '/@/components/PageTitle/index.vue';
import type { GetIndicatorDetailsDimensionItem, GetIndicatorDetailsDimensionItemMetrics, MetricNodeItem } from "/#/viewTypes/sourcingBigData";
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue';
import { getIndicatorDetailsListApi, getIndicatorDetailsMinorOptionsApi, saveIndicatorDetailsModelApi } from "/@/api/supplierRating";
import dayjs from "dayjs";
import { add } from "/@/utils/decimal";
import { cloneDeep } from "lodash-es";
import { v4 } from "uuid";

onBeforeMount(() => {
  init();
});

const router = useRouter();
const routes = useRoute();
// 加载
const loading = ref<boolean>(false);
// 模型id
const modelId = ref<string>("");
// 模型详情列表
const modelIndicatorList = ref<Array<GetIndicatorDetailsDimensionItem>>([]);
// 源模型详情数据
const originModelIndicatorList = ref<Array<GetIndicatorDetailsDimensionItem>>([]);
// 新增指标栏弹窗
const addIndicatorItemDialog = ref<boolean>(false);
// 编辑指标分栏弹窗
const editIndicatorItemDialog = ref<boolean>(false);
// 删除指标分栏弹窗
const removeIndicatorItemDialog = ref<boolean>(false);
// 删除指标分栏细项弹窗
const removeIndicatorMinorDialog = ref<boolean>(false);
// 指标分栏细项规则数据
const indicatorDetailsMinorOptions = ref<Array<MetricNodeItem>>([]);
// 重置该模型下所有指标分栏
const resetIndicatorItemDialog = ref<boolean>(false);
// 级联配置
const fieldNames = ref({
  label: 'name',
  value: 'name',
  children: 'children'
});

async function init() {
  try {
    const { query } = routes;
    if (!query.modelId) {
      message.error("缺少模型id参数");
      return;
    }
    modelId.value = query.modelId as string;
    await getIndicatorDetailsList(modelId.value);
  } catch (error) {

  }
}

/**
 * 获取指标详情列表
 * @param id 
 */
async function getIndicatorDetailsList(id: string) {
  try {
    loading.value = true;
    const result = await getIndicatorDetailsListApi(id);
    if (result) {
      const config = typeof result.config == "string" ? JSON.parse(result.config) : {};
      const _temp = config.dimensions ? config.dimensions : [];
      modelIndicatorList.value = cloneDeep(_temp);
      originModelIndicatorList.value = cloneDeep(_temp);
      await getIndicatorDetailsMinorOptions();
    }
  } catch (error) {

  } finally {
    loading.value = false;
  }
}

/**
 * 获取细项指标规则
 */
async function getIndicatorDetailsMinorOptions() {
  try {
    const options = await getIndicatorDetailsMinorOptionsApi();
    if (options.metricNodes instanceof Array) {
      indicatorDetailsMinorOptions.value = options.metricNodes;
    }
  } catch (error) {
    console.log(error);

  }
}

/**
 * 本地新增指标分栏
 */
async function addLocalIndicatorItem() {
  try {
    await checkFormSaveStatus();
    addIndicatorItemDialog.value = true;
  } catch (error) {

  }
}

/**
 * 创建分栏
 * @param data 
 */
function dataChange(data) {
  modelIndicatorList.value.push({
    name: data.name,
    description: data.description ? data.description : "",
    // 采用uuid
    id: v4(),
    createDate: dayjs(new Date().valueOf()).format("YYYY-MM-DD HH:mm:ss"),
    metrics: []
  });
}

/**
 * 分数统计
 */
function countScore(list: Array<GetIndicatorDetailsDimensionItemMetrics>) {
  let sum = 0;
  if (list?.length) {
    sum = list.reduce((pre, current, index) => {
      const before = checkValue(pre, "score") as string;
      const last = checkValue(current, "score") as string;
      return add(before, last) as unknown as number;
    }, sum);
  }
  return sum;
}

function checkValue(value: any, prop: string) {
  if (Object.prototype.toString.call(value) == "[object Object]") {
    return parseFloat(value[prop]) || parseFloat(value[prop]) as unknown as string == "0" ? value[prop] : 0;
  } else {
    return value || value == "0" ? value : 0;
  }
}

// 编辑模型分栏缓存变量
const editIndicatorTempData = ref<GetIndicatorDetailsDimensionItem | null>();
const editIndicatorTempDataIndex = ref<number | string>("");

// 编辑指标分栏信息
async function editIndicator(item: GetIndicatorDetailsDimensionItem, index: number) {
  try {
    await checkFormSaveStatus();
    editIndicatorTempData.value = item;
    editIndicatorTempDataIndex.value = index;
    editIndicatorItemDialog.value = true;
  } catch (error) {

  }
}

/**
 * 编辑弹窗关闭
 * @param flag 
 */
function editDialogClose(flag) {
  editIndicatorItemDialog.value = flag;
  editIndicatorTempDataIndex.value = "";
  editIndicatorTempData.value = null;
}

// 编辑分栏确定
function editDataChange(data) {
  modelIndicatorList.value[editIndicatorTempDataIndex.value as number].name = data.name;
  modelIndicatorList.value[editIndicatorTempDataIndex.value as number].description = data.description;
}

//删除模型指标分栏 缓存下标变量
const removeCurrentIndex = ref<number | string>("");
const removeCurrentName = ref<string>("");

/**
 * 删除分栏按钮触发 弹窗
 * @param index 
 */
function removeIndicator(index: number, name: string) {
  removeCurrentIndex.value = index;
  removeCurrentName.value = name;
  removeIndicatorItemDialog.value = true;
}

/**
 * 删除分栏 弹窗确定删除
 */
function removeOk() {
  modelIndicatorList.value.splice(removeCurrentIndex.value as number, 1);
}

/**
 * 删除弹窗关闭
 * @param flag 
 */
function removeDialogClose(flag) {
  removeIndicatorItemDialog.value = flag;
  removeCurrentIndex.value = "";
  removeCurrentName.value = "";
}

/**
 * 表单实例 list
 */
const indicatorMinorTermForm = ref<Array<FormInstance>>();

// 表单验证规则
const indicatorMinorTermFormRules = ref<Record<string, Rule[]>>({
  metricName: [
    {
      required: true, whitespace: true, trigger: ["blur", "change"], message: "请输入指标名称"
    }
  ],
  paths: [
    {
      required: true, type: "array", whitespace: true, trigger: ["blur", "change"], message: "请选择指标规则"
    }
  ],
  score: [
    {
      whitespace: true, trigger: ["blur", "change"], validator: (rule, value) => {
        const reg = /^(\-)?(0|[1-9][0-9]*)(\.\d+)?$/;
        if (!reg.test(value)) {
          return Promise.reject("请填写正确的分数");
        }
        return Promise.resolve();
      }
    }
  ],
  edit: [
    {
      trigger: ["change"], validator: (rule, value) => {
        if (value === true) {
          return Promise.reject("请先保存指标细项");
        }
        return Promise.resolve();
      }
    }
  ]
});

// 细项列表配置
const columnsOptions = ref([
  {
    title: '序号',
    dataIndex: 'key',
    align: 'left',
    width: 52,
    slots: { customRender: 'key' },
  },
  {
    align: "left",
    title: "指标名称",
    dataIndex: "metricName",
    slots: { customRender: 'metricName' },
  },
  {
    align: "left",
    title: "规则",
    dataIndex: "ruleName",
    slots: { customRender: 'ruleName' },
  },
  {
    align: "left",
    title: "得分",
    dataIndex: "score",
    slots: { customRender: 'score' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    align: 'left',
    width: 208
  },
]);

/**
 * 保存一行指标细项 验证
 * @param index 
 */
async function saveIndicatorMinorItem(row, index: number, itemIndex: number) {
  try {
    if (indicatorMinorTermForm.value) {
      let form: FormInstance = indicatorMinorTermForm.value instanceof Array ? indicatorMinorTermForm.value[itemIndex] : indicatorMinorTermForm.value;
      // 验证
      await form.validateFields([["metrics", index, "metricName"], ["metrics", index, "paths"], ["metrics", index, "score"]]);
      // 验证通过
      row.edit = false;
    }
  } catch (error) {
    console.log(error);
  }
}

/**
 * 指标细项 级联选择变化
 */
async function cascaderSelectChange(value, selectedOptions, row: GetIndicatorDetailsDimensionItemMetrics) {
  if (value.length) {
    row.ruleName = selectedOptions[selectedOptions.length - 1].name;
    row.metricField = selectedOptions[selectedOptions.length - 1].code;
    row.score = selectedOptions[selectedOptions.length - 1].metricMaxScore
  } else {
    row.ruleName = "";
    row.metricField = "";
    row.score = "";
  }
}

// 指标分栏名称
const removeIndicatorName = ref<string>("");
// 指标分栏细项名称
const removeIndicatorMinorName = ref<string>("");
// 需要移除的指标分栏下的细项下标
const removeIndicatorMinorIndex = ref<string | number>("");
// 需要移除的指标分栏缓存数据
const removeIndicatorMinor = ref<GetIndicatorDetailsDimensionItem | null>();

/**
 * 删除指标分栏细项 弹窗打开
 * @param row 
 * @param index 
 */
function removeIndicatorMinorItem(indicatorName: string, indicatorMinorName: string, item: GetIndicatorDetailsDimensionItem, index: number) {
  removeIndicatorMinorIndex.value = index;
  removeIndicatorName.value = indicatorName;
  removeIndicatorMinorName.value = indicatorMinorName;
  removeIndicatorMinor.value = item;
  removeIndicatorMinorDialog.value = true;
}

/**
 * 删除细项确认
 */
function removeMinorOk() {
  if (removeIndicatorMinor.value) {
    removeIndicatorMinor.value.metrics?.splice(removeIndicatorMinorIndex.value as number, 1);
  }
}

/**
 * 删除指标细项弹窗关闭
 * @param flag 
 */
function removeMinorDialogClose(flag) {
  removeIndicatorMinorDialog.value = flag;
  removeIndicatorMinorIndex.value = "";
  removeIndicatorName.value = "";
  removeIndicatorMinor.value = null;
}

// 添加指标细项
async function addIndicatorMinor(indicator: any) {
  try {
    await checkFormSaveStatus();
    indicator.metrics?.push({
      edit: true,
      metricField: "",
      metricName: "",
      ruleName: "",
      score: "",
      paths: []
    });
  } catch (error) {

  }
}

/**
 * 计算延迟触发
 */
let timer: any = null;

function clearTimer() {
  clearTimeout(timer as any);
  timer = null;
}

/**
 * 计算模型分数总数
 */
function getCountScore(list: Array<GetIndicatorDetailsDimensionItem>) {
  clearTimer();
  let sum = 0;
  if (list?.length) {
    list.forEach(item => {
      sum = add(sum, countScore(item.metrics as Array<GetIndicatorDetailsDimensionItemMetrics>)) as unknown as number;
    });
  };
  return sum;
}

// 检查是否有填写表单 未保存 验证所有表单项目
async function checkFormSaveStatus() {
  try {
    if (indicatorMinorTermForm.value) {
      const len = indicatorMinorTermForm.value.length;
      for (let i = 0; i < len; i++) {
        // 表单实例
        const form = indicatorMinorTermForm.value[i];
        // 取出映射id
        const mapId = form.$el.dataset.mapid;
        // 表单对应的映射数据
        const dataIndex = modelIndicatorList.value.findIndex(item => item.id == mapId);
        if (dataIndex != -1) {
          const dataList = modelIndicatorList.value[dataIndex].metrics as Array<GetIndicatorDetailsDimensionItemMetrics>;
          for (let childIndex = 0; childIndex < dataList.length; childIndex++) {
            const result = await form.validateFields([["metrics", childIndex, "edit"]]).catch(err => {
              // 主动捕获错误进行提示
              message.error(`请先保存第${dataIndex + 1}指标栏下,第${childIndex + 1}行指标细项`);
              return Promise.reject("有正在编辑的指标细项");
            });
          }
        }
      }
    }
  } catch (error) {
    return Promise.reject();
  }
}

/**
 * 保存所有指标配置
 */
async function saveModelAllOptions() {
  try {
    if (!modelId.value) return message.error("缺少模型id参数");
    await checkFormSaveStatus();
    // 有表单 验证所有表单
    if (indicatorMinorTermForm.value) {
      for (const form of indicatorMinorTermForm.value) {
        await form.validateFields();
      }
    }
    let _temp = cloneDeep(modelIndicatorList.value);
    _temp = _temp.map(item => {
      const _object = {
        id: item.id,
        name: item.name,
        description: item.description,
        createDate: dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss"),
      };
      const _metrics: any = [];
      if (item?.metrics?.length) {
        item.metrics.forEach(child => {
          const _array = (child.paths as unknown as Array<any>);
          _metrics.push({
            ruleName: child.ruleName,
            metricName: child.metricName,
            score: child.score,
            paths: _array,
            metricField: child.metricField
          });
        });
      }
      _object["metrics"] = _metrics;
      return _object;
    });
    await saveIndicatorDetailsModelApi({
      modelId: modelId.value,
      modelConfig: {
        dimensions: _temp
      }
    });
    await init();
  } catch (error) {

  }
}

/**
 * 重置所有指标类型
 */
function resetModelAllOptions() {
  resetIndicatorItemDialog.value = true;
}

/**
 * 确定重置
 */
function resetOk() {
  modelIndicatorList.value = modelIndicatorList.value.map(item => {
    return {
      ...item,
      metrics: []
    };
  });
}



</script>

<style lang="less" scoped>
.indicator-details-container {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;

  :deep(.ant-spin-spinning) {
    max-height: unset;
  }

  :deep(.ant-spin-container) {
    height: 100%;
  }

  .indicator-details-container-inner {
    width: 100%;
    height: 100%;

    .indicator-details-header {
      height: 48px;
      display: flex;
      align-items: center;
    }

    .indicator-details-content {
      width: 100%;
      height: calc(100% - 48px);

      .empty-indicator-details {
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .empty-indicator-details-inner {
          display: flex;
          flex-direction: column;
          align-items: center;

          .emty-tip-text {
            color: #909399;
            margin-top: 20px;
            line-height: 22px;
            font-size: 14px;
          }

          .add-indicator-btn {
            margin-top: 20px;
            height: 32px;
            padding: 0px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #C11A20;
            color: #fff;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }

      // 有指标详情
      .has-indicator-details {
        width: 100%;
        height: 100%;

        .add-new-indicator-container {
          height: 64px;
          padding: 0px 16px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          background: #fff;

          .add-new-indicator-btn {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0px 16px;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid #1473DC;
            color: #1473DC;
            box-sizing: border-box;
            border-radius: 4px;
            cursor: pointer;
          }
        }

        .indicator-list-container {
          height: calc(100% - 64px);
          box-sizing: border-box;
          overflow: auto;
          margin-top: 8px;

          .indicator-list-item {
            margin-top: 8px;
            padding: 12px 16px 16px 16px;
            box-sizing: border-box;
            background: #fff;

            &:first-of-type {
              margin-top: 0px;
            }

            .indicator-list-item-header {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .left-title {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 500;
                color: #303133;

                .indicator-name {
                  padding-left: 8px;
                  position: relative;

                  &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 0px;
                    transform: translateY(-50%);
                    width: 2px;
                    height: 14px;
                    background: #C11A20;
                  }
                }
              }

              .right-btn-container {
                display: flex;
                align-items: center;

                .remove-indicator-btn,
                .edit-indicator-btn {
                  height: 32px;
                  padding: 0px 16px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  box-sizing: border-box;
                  font-size: 14px;
                  font-weight: 500;
                  border-radius: 4px;
                  cursor: pointer;
                }

                .remove-indicator-btn {
                  border: 1px solid #C11A20;
                  color: #C11A20;
                }

                .edit-indicator-btn {
                  border: 1px solid #1473DC;
                  color: #1473DC;
                  margin-right: 16px;
                }
              }
            }

            .indicator-description {
              margin-top: 12px;
              background: #F5F7FA;
              border-radius: 2px;
              padding: 8px 16px;
              box-sizing: border-box;
              line-height: 22px;
              font-size: 14px;
              font-weight: 500;
              color: #303133;

              .indicator-description-text {
                display: flex;
                align-items: center;

                .indicator-description-content {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }

              .indicator-create-text {
                margin-top: 8px;
              }

              .indicator-description-label {
                color: #606266;
                margin-right: 8px;
                white-space: nowrap;
              }
            }

            // 指标细项
            .indicator-minor-term {
              margin-top: 16px;
              border: 1px solid #DCDFE6;
              border-radius: 4px;
              padding: 16px 0px;
              display: flex;
              flex-direction: column;
              align-items: center;

              :deep(.indicator-minor-term-form) {
                margin-bottom: 16px;
                width: 100%;
                padding: 0px 120px;
                box-sizing: border-box;

                .ant-form-item-explain-connected {
                  display: none;
                }

                .ant-form-item {
                  margin-bottom: 0px;

                  .ant-form-item-control-input {
                    padding-left: 0px !important;
                  }
                }

                .action-field {
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  font-weight: 500;

                  .action-field-edit {
                    color: #1473DC;
                    margin-right: 12px;
                    cursor: pointer;
                  }

                  .action-field-remove {
                    color: #C11A20;
                    cursor: pointer;
                  }
                }

                .ant-table-thead>tr>th {
                  background: #EBEEF5;
                  color: #606266;
                  font-size: 14px;
                  font-weight: 600;
                  padding: 8px 12px;
                  white-space: nowrap;
                }
              }

              .add-indicator-minor-term {
                display: flex;
                height: 32px;
                align-items: center;
                justify-content: center;
                color: #1473DC;
                border-color: #1473DC;
                padding: 0px 16px;
                box-sizing: border-box;
                border: 1px solid #1473DC;
                border-radius: 4px;
                cursor: pointer;
              }
            }
          }

          .save-model-setting-options {
            height: 64px;
            padding: 0px 16px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            box-sizing: border-box;
            border-top: 1px solid #F2F3F5;
            background: #fff;

            .model-count-score {
              color: #606266;
              font-size: 14px;
              font-weight: 500;
              line-height: 22px;

              .score-text {
                color: #303133;
                font-size: 20px;
                font-weight: 500;
                margin-left: 4px;
                margin-right: 4px;
                line-height: 28px;
              }
            }

            .save-model-setting-btn,
            .reset-model-setting-btn {
              height: 32px;
              padding: 0px 16px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              font-weight: 500;
              border-radius: 4px;
              cursor: pointer;
            }

            .reset-model-setting-btn {
              color: #606266;
              border: 1px solid #DCDFE6;
              margin-left: 12px;
            }

            .save-model-setting-btn {
              color: #fff;
              background: #C11A20;
              margin-left: 16px;
            }
          }
        }
      }
    }
  }
}
</style>